<template>
    <view class="bg-[#F6F7F9] min-h-screen">
        <up-navbar title="申请售后" :safeAreaInsetTop="true" bgColor="#FFF" :placeholder="true">
			<template #left>
				<view class="flex px-[24rpx] py-[16rpx] border-[1rpx] border-slate-200 rounded-[38rpx]">
					<up-icon name="arrow-left" size="19" @click="goback"></up-icon>
					<up-line direction="column" :hairline="false" length="16" margin="0 8px"></up-line>
					<up-icon name="home" size="20" @click="gohome"></up-icon>
				</view>
			</template>
		</up-navbar>
        <view class="mx-[30rpx] my-[24rpx] rounded-[16rpx] bg-[#fff] p-[30rpx]">
            <view class="text-[30rpx] text-[#333] font-bold mb-[30rpx]">退款商品</view>
            <view class="flex mb-[30rpx]">
                <view class="mr-[24rpx]">
                    <up-image :src="Detail.pic" width="128rpx" height="128rpx" radius="8"></up-image>
                </view>
                <view class="flex flex-1">
                    <view class="flex flex-col justify-between flex-1">
                        <view>
                            <view class="text-[30rpx] font-bold text-[#111]">{{ Detail.name }}</view>
                            <view class="text-[24rpx] text-[#666] font-normal">规格: {{ Detail.productJson }}</view>
                        </view>
                        <view class="flex">
                            <view v-for="(item,index) in Detail.features" :key="index" class="px-[10rpx] py-[4rpx] border-[1rpx] border-[#ccc] text-[18rpx] text-[#ff4d1b] rounded-[4rpx] mr-[8rpx]">{{ item }}</view>
                        </view>
                    </view>
                    <view class="flex justify-center items-end flex-col flex-shrink-0">
                        <priceNumber :price="Detail.price"></priceNumber>
                        <view>×{{ Detail.num }}</view>
                    </view>
                </view>
            </view>
            <view class="flex justify-between mb-[30rpx]">
                <view>
                    <view class="mb-[16rpx]">
                        <text class="text-[#333] text-[26rpx] font-normal">申请数量</text>
                        <text class="text-[#f00] text-[26rpx] font-normal">*</text>
                    </view>
                    <view class="text-[20rpx] text-[#999] font-normal">
                        最多可退{{Detail.num}}件
                    </view>
                </view>
                <view>
                    <up-number-box v-model="value" :max="Detail.num"></up-number-box>
                </view>
            </view>
            <view class="flex justify-between items-center">
                <view class="text-[26rpx] text-[#333] font-normal">退款金额</view>
                <view class="text-[26rpx] text-[#f00] font-bold">￥{{ priceAll }}</view>
            </view>
        </view>
        <view class="mx-[30rpx] my-[24rpx] rounded-[16rpx] bg-[#fff] p-[30rpx]">
            <view class="text-[30rpx] text-[#333] font-bold mb-[30rpx]">退款信息</view>
            <view class="flex mb-[24rpx]">
                <view class="text-[26rpx] text-[#333] font-normal">申请原因</view>
                <view class="text-[26rpx] text-[#f00] font-normal">*</view>
            </view>
            <view class="flex flex-wrap">
                <view :class="reasonList.findIndex(item => item =='后台设置可申请原因' ) >= 0? 'bg-[#FFE9E3] border-[#FF4D1B] text-[#FF4D1B]' : ''" @click="checkReturn('后台设置可申请原因')" class="bg-[#f8f8f8] text-[24rpx] text-[#999] px-[20rpx] py-[12rpx] rounded-[40rpx] mr-[24rpx] mb-[16rpx]">后台设置可申请原因</view>
                <view :class="reasonList.findIndex(item => item =='选中状态' ) >= 0 ? 'bg-[#FFE9E3] border-[#FF4D1B] text-[#FF4D1B]' : ''" @click="checkReturn('选中状态')" class="bg-[#f8f8f8] text-[24rpx] text-[#999] px-[20rpx] py-[12rpx] rounded-[40rpx] mr-[24rpx] mb-[16rpx]">选中状态</view>
                <view :class="reasonList.findIndex(item => item =='可多选原因' ) >= 0 ? 'bg-[#FFE9E3] border-[#FF4D1B] text-[#FF4D1B]' : ''" @click="checkReturn('可多选原因')" class="bg-[#f8f8f8] text-[24rpx] text-[#999] px-[20rpx] py-[12rpx] rounded-[40rpx] mr-[24rpx] mb-[16rpx]">可多选原因</view>
                <view :class="reasonList.findIndex(item => item =='其他申请原因' ) >= 0 ? 'bg-[#FFE9E3] border-[#FF4D1B] text-[#FF4D1B]' : ''" @click="checkReturn('其他申请原因')" class="bg-[#f8f8f8] text-[24rpx] text-[#999] px-[20rpx] py-[12rpx] rounded-[40rpx] mr-[24rpx] mb-[16rpx]">其他申请原因</view>
                <view :class="reasonList.findIndex(item => item =='设置了多少原因，都显示出来' ) >= 0 ? 'bg-[#FFE9E3] border-[#FF4D1B] text-[#FF4D1B]' : ''" @click="checkReturn('设置了多少原因，都显示出来')" class="bg-[#f8f8f8] text-[24rpx] text-[#999] px-[20rpx] py-[12rpx] rounded-[40rpx] mb-[16rpx]">设置了多少原因，都显示出来</view>
            </view>
            <view class="mb-[24rpx]">
                <up-textarea v-model="conntet" maxlength="200" placeholder="请输入内容" count ></up-textarea>
            </view>
            <view class="mb-[16rpx]">
                <view v-if="list.length">
                    <image v-for="(item,index) in list" :key="index" :src="item" mode="scaleToFill" class="w-[128rpx] h-[128rpx] block mr-[16rpx]"/>
                </view>
                <image @click="uploadImg" v-if="list.length<5" src="../static/addphone.png" mode="scaleToFill" class="w-[128rpx] h-[128rpx] block"/>
            </view>
            <view class="text-[20rpx] text-[#999] font-normal">上传凭证(必填)，最多上传5张，每张大小不超过5M</view>
        </view>
        <view @click="Submit" class="bg-[#fff] border-[1rpx] border-[#F98D68] leading-[84rpx] text-center mx-[30rpx] rounded-[16rpx] text-[#F98D68] text-[32rpx]">提交</view>
    </view>
</template>

<script setup>
import { getToken } from '@/utils/auth.js';
import { onLoad } from '@dcloudio/uni-app';
import env from '@/config/common.js';
import priceNumber from '@/components/priceNumber.vue';
import { ref , computed} from 'vue';
import { GetOrderRefund } from '../../API/order';
import { showToast } from '../../utils/utils';
const { goback, gohome } = useTable()
const { list , Detail , value , Submit , priceAll , uploadImg , conntet , reasonList , checkReturn } = useDetail()
function useTable (){
    const goback = () => {
        uni.navigateBack()
    }
    const gohome = () => {
        uni.switchTab({
            url: '/pages/index/index'
        });
    }
    return { goback , gohome }
}
function useDetail(){
    const baseUrl = env.API_BASE_URL_DEV
    const list = ref([])
    const Detail = ref({})
    const value = ref(1)
    const conntet = ref('')
    const reasonList = ref([])
    const priceAll = computed(() => {
        return Detail.value.price * value.value
    })
    const uploadImg = async ()=>{
        uni.chooseImage({
	        count: 1, //默认9
	        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
	        sourceType: ['album'], //从相册选择
	        success: (res)=>{
                uni.uploadFile({
			        url: baseUrl + '/auth/common/upload', //仅为示例，非真实的接口地址
			        filePath: res.tempFilePaths[0],
			        name: 'file',
			        formData: {
				        'user': 'test'
			        },
                    header:{
                        Authorization : getToken()
                    },
			        success: (uploadFileRes) => {
                        list.value.push(JSON.parse(uploadFileRes.data).url)
			        }
		        });
            }
        });
    }
    const Submit = async ()=>{
        let { data } = await GetOrderRefund({orderGoodIdList:[{
            orderGoodId: Detail.value.orderGoodId,
            num:value.value,
            reasonList:reasonList.value,
            reason:conntet.value,
            pic:list.value
        }]})
        showToast('提交成功')
        uni.navigateBack()
    }
    const checkReturn = (item)=>{
        if(reasonList.value.findIndex(it=>it == item)>=0){
            reasonList.value  = reasonList.value.forEach((it,index)=>{
                if(it == item){
                    reasonList.value.splice(index,1)
                }
            })
        }else {
            reasonList.value.push(item)
        }
    }
    return { list , Detail , value , Submit , priceAll , uploadImg , conntet , reasonList , checkReturn}
}
onLoad((options)=>{
    console.log(JSON.parse(options.item));
    Detail.value = JSON.parse(options.item)
})
</script>

<style lang="scss" scoped>

</style>